<!DOCTYPE html>
<html lang="en" layout:decorator="common/contentLayout"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<!--页面内容 继承自common/layout.html-->
<div layout:fragment="content">
    <form class="layui-form" id="queryForm">
        <div class="layui-form-item layui-inline">

            <div class="layui-inline">
                <label class="layui-form-label">消息主题：</label>
                <div class="layui-input-block" style="width: 300px">
                    <select lay-ignore id="topicName" name="topicName" required lay-verType="topicName" lay-verify="required" class="layui-input">
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <select id="ip" name="ip" lay-filter="topicSelect" lay-search>
                    <option value="">请选择db物理机</option>
                    <option th:each="ip:${ipList}" th:value="${ip}" th:text="${ip}"></option>
                </select>
            </div>
            <div class="layui-inline">
                <select id="nodeTypeId" class="search-select">
                    <option value="">请选择队列类型</option>
                    <option value ="1">正常</option>
                    <option value ="2">失败</option>
                </select>
            </div>

            <div class="layui-inline">
                <select id="sortTypeId" class="search-select">
                    <option value="">请选择排序类型</option>
                    <option value ="1">消息总数</option>
                    <option value ="2">消息平均数</option>
                    <option value ="3">消息单表容量</option>
                </select>
            </div>

            <div class="layui-inline">
                <select id="isException" class="search-select">
                    <option value ="0">全部</option>
                    <option value ="1">消息过期</option>
                    <option value ="2">消息量为零</option>
                    <option value ="3">最小Id异常</option>
                </select>
            </div>

            <a class="layui-btn" id="queueSearchList_btn" lay-filter="queueSearchList_btn"><i class="layui-icon">&#xe615;</i>查询</a>
        </div>
    </form>
    <table id="queueReportTable" class="layui-table" lay-data="{height:'full', page:true,limits:[10,20,30,40,50,60,70,80,90,100,1000,2000,3000],limit: 10, id:'queueReportTable',totalRow: true,toolbar:'#toolbarDemo'}" lay-filter="queueReportTable">
        <thead>
        <tr>
            <th lay-data="{field: 'id', align: 'center', sort: true,templet:'#idTpl',totalRowText: '合计'}">队列编号</th>
            <th lay-data="{field: 'ip', align: 'center', sort: true}">ip</th>
            <th lay-data="{field: 'dbName', align: 'center', sort: true}">数据库名</th>
            <th lay-data="{field: 'tbName', align: 'center', sort: true}">表名</th>
            <th lay-data="{field: 'topicName', align: 'center', templet:'#useStatusTpl', sort: true}">topic</th>
            <th lay-data="{field: 'topicOwnerName', align: 'center', sort: true}">负责人</th>
            <th lay-data="{field: 'saveDayNum', align: 'center', sort: true}">保存天数</th>
            <th lay-data="{field: 'nodeType', align: 'center', templet:'#nodeTypeTpl', sort: true}">存储类型</th>
            <th lay-data="{field: 'avgCount', align: 'center',totalRow: true, sort: true}">平均数/天</th>
            <th lay-data="{field: 'minId', align: 'center',templet:'#minIdTpl', sort: true}">最小Id</th>
            <th lay-data="{field: 'maxId', align: 'center', sort: true}">最大Id</th>
            <th lay-data="{field: 'dataSize',align: 'center', sort: true }">单表大小(G)</th>
            <th lay-data="{field: 'msgCount',align: 'center', sort: true}">单表行数</th>
            <th lay-data="{field: 'minTime',align: 'center', sort: true}">最小时间</th>
            <!--            <th lay-data="{field: 'autoIncrement',align: 'center', sort: true}">autoIncrementId</th>-->
        </tr>
        </thead>
    </table>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <div id="messageNum" th:text="${messageNum}"></div>
        <div id="messageAvg" th:text="${messageAvg}"></div>
        <p class="warn1">最小Id为红色，说明消息过期！！！</p>
    </fieldset>
</div>

<div layout:fragment="end-load-files">
    <script th:src="@{/js/queueReport.js}"></script>
    <script type="text/html" id="idTpl">{{= d.id }}
    </script>
    <script type="text/html" id="useStatusTpl">
        {{# if (d.topicName == null || d.topicName == '' || d.topicName == 'undefine') { }}

        {{# } else { }}
        {{d.topicName}}
        {{# } }}
    </script>
    <script type="text/html" id="nodeTypeTpl">
        {{# if (d.nodeType == 1) { }}
        <label><span class="layui-badge layui-bg-green">正常</span></label>
        {{# } else { }}
        <label><span class="layui-badge">失败</span></label>
        {{# } }}
    </script>

    <script type="text/html" id="minIdTpl">
        {{# if (d.isException == 1) { }}

        <div style="background-color: #f52117;color: white">{{ d.minId }}</div>

        {{# } else { }}

        {{ d.minId }}

        {{# } }}
    </script>

    <style type="text/css">
        .warn1 {
            color: red;
            font-size: large;
            font-weight: bold;
        }
    </style>
</div>
</html>
